
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 页面名称 </title>
    // 189000503  左香菊
<style type="text/css">
#img {
	position: absolute;
	left: 200px;
	top: 200px;
	transform: scale(1);
	transition: transform 400ms, left 2000ms, top 2000ms;
}
</style>
</head>
<body style="background-color: black;">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<img id="img" src="img\实验7 资源包\player_left.gif" width="100" height="100" border="0">
<script type="text/javascript">
var img = $("#img");
var iw = img.width();
var ih = img.height();
$(document).click(function(event){
    //获取鼠标坐标
    var X = event.pageX;
    var Y = event.pageY;
    if(iw<X){
        img.attr("src","img/实验7 资源包/player_right.gif");
    }
    else{
        img.attr("src","img/实验7 资源包/player_left.gif");
    }
	img.css({
		left: Math.floor(X-iw/2),
		top: Math.floor(Y-ih/2)
	});
});
img.dblclick(function(){
	img.css({transform: "scale(2)"});
	setTimeout(function(){
		img.css({transform: "scale(1)"});
	}, 3000);
})
</script>
</body>
</html>


